<template>
	<div class="login">
		<div class="box">
			<div class="box-top">
				SharpMes<span>System</span>
			</div>
			<div class="box-center">
				<p>登录系统</p>
				<div>
					<el-input placeholder="请输入用户名" suffix-icon="el-icon-mobile-phone" v-model="user.name">
					</el-input>
					<el-input placeholder="请输入密码" v-model="user.password" show-password>
					</el-input>
					<div class="bian">
						<el-checkbox v-model="checked">记住密码</el-checkbox>
						<el-button type="primary" @click="$store.dispatch('login',user)">Sign In</el-button>
					</div>
					<a href="">I forgot my password</a><br />
					<a href="">Register a new membership</a>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				user: {
					name: "",
					password: "",
				},
				checked: false,
			}
		}
	}
</script>

<style scoped lang="scss">
	.login {

		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		width: 100%;
		height: 100vh;
		background-color: rgb(210, 214, 222);

		.box {
			width: 360px;
			margin: 84px auto 0;
			z-index: 1000;

			.box-top {
				width: 100%;
				height: 50px;
				margin-bottom: 25px;
				text-align: center;
				font-size: 35px;
				font-weight: 400;

				>span {
					font-weight: 200;
				}
			}

			.box-center {
				background-color: #fff;
				width: 100%;
				padding: 20px;

				>p {
					font-size: 14px;
					text-align: center;
					padding: 0 20px 20px;
					color: #666;
				}

				>div {
					width: 100%;
					a{
						font-size: 13px;
						line-height: 1.4;
					}
					.el-input {
						height: 34px;
						margin-bottom: 20px;
					}

					.bian {
						display: flex;
						height: 40px;
						align-items: center;
						justify-content: space-between;

						.el-button {
							width: 87px;
							height: 34px;
							padding: 0;
							border: #666;
							line-height: 34px;
							background-color: #3c8dbc;
							border-radius: 0;
						}
					}
				}
			}
		}
	}
</style>
